<template>
  <view class="card slide-up">
    <view class="header">
      <text class="title">专业建议</text>
    </view>

    <view class="advice-list">
      <!-- 出手时机 -->
      <view class="advice-item">
        <view class="icon-box">
          <image
            class="icon-box-image"
            src="/static/history.png"
            mode="scaleToFill"
          />
        </view>
        <view class="content">
          <text class="label">出手时机</text>
          <text class="desc">
            {{ first  }}
          </text>
        </view>
      </view>

      <!-- 展示重点 -->
      <view class="advice-item">
        <view class="icon-box">
          <image
            class="icon-box-image"
            src="/static/cream.png"
            mode="scaleToFill"
          />
        </view>
        <view class="content">
          <text class="label">展示重点</text>
          <text class="desc">
            {{ second }}
          </text>
        </view>
      </view>

      <!-- 议价策略 -->
      <view class="advice-item">
        <view class="icon-box">
          <image
            class="icon-box-image"
            src="/static/tag.png"
            mode="scaleToFill"
          />
        </view>
        <view class="content">
          <text class="label">议价策略</text>
          <text class="desc">
            {{ third }}
          </text>
        </view>
      </view>
    </view>

    <!-- 补充说明 -->
    <view class="note">
      <view class="note-flex">
        <uni-icons type="info-filled" size="15" color="#005FE3" />
        <text class="note-title">
          补充说明
        </text>
      </view>
       
      <text class="note-content">
        {{ fourth.replace(/\\n/g, '\n') }}
      </text>
      <view class="note-content" style="margin-top: 20rpx;">
        *此估值价格由AI大模型生成，不代表本平台观点，请仔细甄别。
      </view>
    </view>
    <!-- 完成 -->
     <button class="submit-btn" @click="onConfirm">完成</button>
  </view>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  profAdvice: {
    type: Object,
    default: () => ({})
  },
  suppExp: {
    type: Object,
    default: () => ({})
  }
}); 

const first = computed(() => {
  const realString = props.profAdvice.replace(/\\n/g, '\n')  // 把 \n 转换成真正的换行
  return realString.split('\n')[0] || ''
})

const second = computed(() => {
  const realString = props.profAdvice.replace(/\\n/g, '\n')
  return realString.split('\n')[1] || ''
})

const third = computed(() => {
  const realString = props.profAdvice.replace(/\\n/g, '\n')
  return realString.split('\n')[2] || ''
})

const fourth = computed(() => {
  const realString = props.suppExp
  return realString
})
const onConfirm = () => {
  // 也可以跳转其他页面
  uni.switchTab({
    url: `/pages/index/index`
  })
}
</script>

<style scoped>
.card {
  background-color: #fff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 95, 227, 0.08);
  padding: 30rpx;
  margin-bottom: 30rpx;
  margin-top: 40rpx;
}

.slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #005FE3;
}

.advice-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.advice-item {
  display: flex;
  align-items: flex-start;
}

.icon-box {
  padding: 16rpx;
  border-radius: 999rpx;
}
.icon-box-image {
  width: 40rpx;
  height: 40rpx;
  border-radius: 999rpx;
  background: rgba(0, 95, 227, 0.1);
  padding: 20rpx;
  margin-right: 10rpx;
}

.icon {
  font-size: 32rpx;
  color: #005FE3;
}

.content .label {
  display: block;
  font-size: 30rpx;
  font-weight: 500;
  margin-bottom: 6rpx;
  color: #333;
}

.content .desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.highlight {
  font-weight: bold;
  color: #005FE3;
}

.note {
  margin-top: 40rpx;
  padding-top: 24rpx;
  border-top: 1rpx solid #E6E9EF;
  background-color: rgba(0, 95, 227, 0.05);
  padding: 24rpx;
  border-radius: 16rpx;
}

.note-title {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #005FE3;
  margin-left: 5rpx;
}

.note-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.note-flex {
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}
.submit-btn {
  background: linear-gradient(to right, #45b5ff, #2b65f6);
  color: white;
  font-size: 32rpx;
  border-radius: 24rpx;
  width: 580rpx;
  height: 85rpx;
  line-height: 85rpx;
  margin: 40rpx auto 10rpx;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
